<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>文件列表</title>

</head>
<body align="center">

<h2>欢迎，<span th:if="${session.user!=null}" th:text="${session.user.username}"/></h2>
<h3>文件列表</h3>
<button id="start">开启定时更新</button>
<button id="stop">关闭定时更新</button><br><br>
<table border="1px" align="center">
    <tr>
        <th>id</th>
        <th>文件原名称</th>
        <th>文件新名称</th>
        <th>文件后缀名</th>
        <th>存储路径</th>
        <th>文件大小</th>
        <th>文件类型</th>
        <th>是否图片</th>
        <th>下载次数</th>
        <th>上传时间</th>
        <th>操作</th>
    </tr>
    <tr th:class="${fileStat.odd}?'row1':'row2'" th:each="file,fileStat:${files}">
        <td><span th:text="${file.id}"></span></td>
        <td><span th:text="${file.oldFileName}"></span></td>
        <td><span th:text="${file.newFileName}"></span></td>
        <td><span th:text="${file.ext}"></span></td>
        <td><span th:text="${file.path}"></span></td>
        <td><span th:text="${file.size}"></span></td>
        <td><span th:text="${file.type}"></span></td>
        <td><span th:text="${file.isImg}"></span></td>
        <td th:id="${file.id}"><span th:text="${file.downCounts}"></span></td>
        <td><span th:text="${#dates.format(file.uploadTime,'yyyy-MM-dd HH:mm:ss')}"></span></td>
        <td>
            <a th:href="@{/file/download(id=${file.id})}">下载</a>
            <a th:href="@{/file/download(id=${file.id},openStyle='inline')}">打开</a>
            <a th:href="@{/file/delete(id=${file.id})}">删除</a>
        </td>
    </tr>
</table>

<h3>上传文件</h3>
<form th:action="@{/file/upload}" method="post" enctype="multipart/form-data">
    <input type="file" name="filename">
    <input type="submit" value="上传">
</form>

<script th:src="@{/js/jquery-1.12.4.js}"></script>
<script>
    $(function (){
        var time;

        $("#start").click(function (){
            console.log("开启定时更新...")
            time = setInterval(function (){
                $.get("[[@{/file/showJson}]]",function (res){
                    $.each(res, function (index, file){
                        $("#"+file.id).text(file.downCounts);
                    })
                })
            },3000);
        })

        $("#stop").click(function (){
            console.log("关闭定时更新...");
            clearInterval(time);
        })
    });
</script>

</body>
</html>